﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Relaygame.aspx.cs" Inherits="RaceList.activity.relay.Relaygame" %>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />

        <title>随便走</title>

        <meta name="keywords" content="">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />

        <link href="style/layout.css" rel="stylesheet" />
    </head>
    <body class="running_body">
        <section id="web_wrap">
            <% if (Request.IsLocal)
               { %>
                <%= Request.Url.ToString() %>
                <%= JsonConvert.SerializeObject(SessionHelp.UserData) %>
            <% } %>
            <!-- 页面框架 -->
            <div class="container">
                <div class="running_box">
                    <div class="cb"></div>
                    <div class="qiu"></div>
                    <div class="line"></div>
                    <div class="left_con"></div>
                    <div class="right_con"></div>

                    <!-- 弹出成绩 -->
                    <div class="runningover_wrap">
                        <div class="runningover_img">
                            <% string url = SessionHelp.UserData.HeadUrl; %>
                            <img src="<%= string.IsNullOrEmpty(url) ? "images/user.jpg" : url %>" alt="">
                        </div>

                        <div class="runningover">
                            <p>你跑了<span></span></p>
                            <p>不要太厉害哦</p>
                        </div>
                    </div>

                    <!-- 跑时倒计时 -->
                    <div class="running_count">
                        <p>还有<span class="countTime">1</span>S</p>
                    </div>

                    <div class="people_box">
                        <div class="people_stop"></div>
                        <div class="people_run"></div>
                        <div class="people_ready"></div>
                        <div class="shadow"></div>
                    </div>

                    <div class="ready_title"></div>

                    <div class="userrunning_box">
                        <img src="<%= string.IsNullOrEmpty(url) ? "images/user.jpg" : url %>" alt="">
                        <div class="running_meter">
                            <p><em>0.0</em>M</p>
                        </div>
                    </div>

                    <div class="run_btn">
                        <div class="runBtn_start"></div>
                        <div class="runBtn_over"></div>

                        <a href="javascript:;" class="left_footer"><i></i></a>
                        <a href="javascript:;" class="right_footer"><i></i></a>

                    </div>

                    <!-- <div class="clear"></div> -->
                </div>


            </div>

            <!-- loading -->
            <div class="loading_box">
                <div class="runloading">
                    <p>loading.....</p>
                    <p>奔跑吧！骚年！</p>
                </div>
            </div>
            <!-- loading end-->
        </section>
    </body>
</html>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/main.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
    fnRunning();

    function fnRunning() {
        var readyTitle = $(".ready_title");
        var line = $(".line");
        var leftRightCon = $(".left_con, .right_con, .line");
        var peopleStop = $(".people_stop");
        var peopleRun = $(".people_run");
        var peopleReady = $(".people_ready");
        var runBtn = $(".run_btn a");
        var runBtnOver = $(".runBtn_over");
        var runBtnStart = $(".runBtn_start");
        var runningCount = $(".running_count");
        var runningoverWrap = $(".runningover_wrap");
        var leftBtn = $(".left_footer");
        var rightBtn = $(".right_footer");
        var lRightBtn = $(".left_footer, .right_footer");
        var meter = $(".running_meter p em");
        var finalPiont = $(".runningover p span");
        var clickNum = 0;
        var _body = $("body");


        lRightBtn.on('touchstart', function() {
            stopMove();
            runMeter();
            clickNum += 1;
        });

        function stopMove() {
            _body[0].addEventListener('touchstart', function(event) {
                event.preventDefault();
            });
        }

        function runMeter() {
            var nowMeter = meter.text();
            var oldNum = parseFloat(nowMeter);
            var num = 0;
            if (oldNum <= 150) {
                num = (Math.random() * 2 + 2).toFixed(2); //(2-4)
            }
            if (oldNum > 150) {
                num = (Math.random()).toFixed(2); //(1-2)
            }
            var newNum = parseFloat(num);
            var result = (oldNum + newNum).toFixed(2);

            //console.log('oldNum'+oldNum+'newNum'+newNum+'result'+result);
            meter.text(result);
        }

        runBtnStart.click(function() {
            readyTitle.addClass("active"); //标题隐藏

            setTimeout(function() {
                leftRightCon.addClass("active");
                runningCount.show();
                readyTitle.css({ "opacity": "0" });
                peopleReady.css({ "opacity": "0" });
                peopleRun.css({ "opacity": "1" });
                countDown();
            }, 500);
            setTimeout(function() {
                runBtnOver.show();
            }, 10000);


            setTimeout(function() {
                peopleRun.css({ "opacity": "0" });
                peopleStop.css({ "opacity": "1" });
                leftRightCon.removeClass("active");
                runningCount.slideUp(2500);

                setTimeout(function() {
                    var finalRunPiont = $(".running_meter").text();

                    finalPiont.text(finalRunPiont); // alert(finalRunPiont.text())
                    runningoverWrap.css({ "opacity": "1" }); //弹出成绩

                    TransServer($(".running_meter").text(), clickNum);
                }, 2500);
            }, 1000);

            runBtnStart.hide();
        });


        function countDown() {
            function run() {
                var s = $(".countTime")[0];

                if (s.innerHTML == 0) {
                    return false;
                }
                s.innerHTML = s.innerHTML * 1 - 1;
            }

            window.setInterval(run, '<%= ActivityConfig.RelayMaxScore %>');
        }

        function TransServer(finalRunPoint, clickNum) {
            $.post("Relaying.ashx", { SumScore: finalRunPoint, ClickNum: clickNum }, function(data) {
                if (data.Status != '200') {
                    if (!data.IsShowException) {
                        alert('错误，请稍后重试');
                    } else {
                        alert(data.Exception);
                    }
                    console.log(data.Exception);
                } else {
                    if (data.Finished) {
                        $('.runningover span').html(data.Score + 'm');
                        $(".runningover_wrap").css({ "opacity": "1" });
                        $(".runBtn_over").show();
                    } else {
                        $('.running_meter p').html(data.Score + 'm');
                    }
                }

                if (data.Url != "") {
                    setTimeout(function() {
                        window.location.href = data.Url;
                    }, 2000);
                }

                //var today = new Date();
                //var h = today.getHours();
                //var m = today.getMinutes();
                //var s = today.getSeconds();
                //if ($('#result li').length > <%= ActivityConfig.RelayTotalPerson %>) {
                //    $('#result li').eq(4).remove();
                //    $('#result li:eq(0)').before('<li>' + h + ':' + m + ':' + s + ':' + JSON.stringify(data) + '</li>');
                //} else {
                //    $('#result').append('<li>' + h + ':' + m + ':' + s + ':' + JSON.stringify(data) + '</li>');
                //}
            }, 'json');
        }

    }
</script>
<script>
    $(function() {
        //1.config
        wx.config({
            debug: false,
            appId: "<%= WxConfig.appid %>",
            timestamp: "<%= WxConfig.timestamp %>",
            nonceStr: "<%= WxConfig.noncestr %>",
            signature: "<%= WxConfig.signature %>",
            jsApiList: [
                'checkJsApi',
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ',
                'onMenuShareWeibo'
            ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
        wx.ready(function() {
            wx.hideOptionMenu();
        });
    });
</script>